<template>
    <el-container style="height: 100%;">
        <el-menu default-active="/userCenter/qnListManagement" class="el-menu-vertical-demo"
            style="height: 100%;border:none;" router :collapse="isCollapse">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>问卷管理</span>
                </template>
                <el-menu-item index="/userCenter/qnListManagement">问卷列表</el-menu-item>
                <el-menu-item index="/userCenter/qnRecordListManagement">测评记录</el-menu-item>
                <el-menu-item index="/userCenter/distributeTaskQNListManagement">分发列表</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/userCenter/userGroupListManagement">
                <el-icon>
                    <MessageBox />
                </el-icon>
                <span>群组管理</span>
            </el-menu-item>
            <el-menu-item :index="'/userCenter/userInfo/' + userInfo.id">
                <el-icon>
                    <User />
                </el-icon>
                <span>个人信息</span>
            </el-menu-item>
        </el-menu>
        <el-main style="padding: 10px 0px 0px 0px;background-color: #fff;">
            <div
                style="background-color:#f5f6f7;border-radius:8px 0px 0px 8px;margin:10px 0px;display: flex;align-items: center;">
                <el-button @click="() => { this.isCollapse = !this.isCollapse }" size="large" text><el-icon>
                        <Fold v-if="!isCollapse" />
                        <Expand v-else />
                    </el-icon></el-button>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item v-for="(item, index) in breadList" :key="index" :to="{ path: item.path }">{{
                        item.name
                    }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-card
                style="min-height: 100%;background-image: linear-gradient(to top, #fff 20%, #f3f7f8 100%);border-radius: 8px 0px 0px 0px;padding:10px;padding-bottom: 50px;">
                <router-view />
            </el-card>
        </el-main>
    </el-container>
</template>
<script>
import { useUserStore } from "../store/userStore";
export default {
    data() {
        return {
            isCollapse: true
        }
    },
    computed: {
        userInfo() {
            const userStore = useUserStore();
            return userStore.userInfo
        },
        breadList() {
            return this.$route.meta.breadList || [];
        }
    },
    mounted() {
        const userStore = useUserStore();
        if (!userStore.userInfo) {
            this.$router.push('/login')
        }
    }
}
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
</style>